import React from 'react'
//引入声明式导航组件
// NavLink 和vue中的router-link一样, 会自动添加选中的导航类名 --active
// Link 没有选中的active 类名
import { NavLink, Link, Route, Routes, useLocation } from 'react-router-dom';
import '../assets/css/base.css';

import Rules from './Index1'

type Props = {}

export default function Base({ }: Props) {
    // 获取当前的路由地址信息
    const loc = useLocation();
    // console.log('loc', loc);

    return (
        <div>
            {/* 声明式导航 */}
            {
                loc.pathname == '/detail1' ? <></> : <>
                    <NavLink to='/home1'>首页1</NavLink>
                    <NavLink to='/category1'>分类1</NavLink>
                </>
            }

            {/* 
                注意: 必须要使用 Routes包裹Route组件,否则报错
                当使用Routes 和switch 一样, 只匹配一个路由, 当路由匹配后, 就不再匹配下面的路由啦
             */}

            <Rules></Rules>
        </div>
    )
}